<template>
  <div class="q-pa-md">
    <t-btn label="Open Menu" color="primary">
      <t-menu>
        <t-list>
          <t-item tag="label">
            <t-item-section avatar>
              <t-checkbox v-model="firstItemEnabled" />
            </t-item-section>
            <t-item-section>
              <t-item-label>First Item Enabled</t-item-label>
            </t-item-section>
          </t-item>
          <t-item
            v-for="n in 5"
            :key="n"
            v-close-popup="n > 1 || firstItemEnabled"
            :clickable="n > 1 || firstItemEnabled"
            @click="onClick(n)"
          >
            <t-item-section>Menu Item {{ n }}</t-item-section>
          </t-item>
        </t-list>
      </t-menu>
    </t-btn>
  </div>
</template>

<script>
  import { useQuasar } from '@teld/q-components';
  import { ref } from 'vue';

  export default {
    setup() {
      const $q = useQuasar();
      const firstItemEnabled = ref(false);

      return {
        firstItemEnabled,
        onClick(index) {
          if (index > 1 || firstItemEnabled.value) {
            $q.notify({
              message: `Clicked on menu item #${index} and closed QMenu`,
              color: 'primary',
            });
          }
        },
      };
    },
  };
</script>
